<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>

    <!-- 导航栏 -->
    <div class="nav">
      <van-tabs
        v-model="navActive"
        background="transparent"
        title-active-color="#fff"
        title-inactive-color="#ddd"
      >
        <van-tab title="全部 1"></van-tab>
        <van-tab title="降价 2"></van-tab>
        <van-tab title="常卖 3"></van-tab>
        <van-tab title="分类 4"></van-tab>
      </van-tabs>
    </div>

    <div class="shopMain">
      <!-- 小u自营 -->
      <div class="top">
        <span><img :src="topActive ? top1 : top0" alt="" /></span>
        <span>小u自营</span>
        <span>领劵</span>
        <span>已免运费 &nbsp;|</span>
      </div>
      <!-- 商品信息 -->
      <div v-show="shop_data.length>0 ? true: false" class="card" v-for="(item, index) in shop_data" :key="item.id">
        <span>
          <img
            @click="topAct(index)"
            :src="!tipActive[index] ? top0 : top1"
            alt=""
          />
        </span>
        <van-card>
          <template #thumb>
            <img class="thImg" :src="_localhost + item.img" alt="" />
          </template>
          <template #tags>
            <div class="tags11">
              <van-tag class="tag1">{{ item.goodsname }}</van-tag>
              <br />
              <van-tag class="tag2">规格：不错的商品</van-tag>
              <br />
              <van-tag class="tag3">比加入时降低100</van-tag>
              <br />
              <van-tag class="tag4"
                ><span>￥{{ item.price }}</span>
                <span><del>￥3999</del></span></van-tag
              >
            </div>
          </template>
          <!-- 添加和删除 -->
          <template #num>
            <div class="numBtn">
              <span class="numBtn1" @click="del(index)">-</span>
              <span class="numBtn2">{{ item.num }}</span>
              <span class="numBtn3" @click="add(index)">+</span>
            </div>
          </template>
        </van-card>
      </div>
    </div>
    <!-- 结算 -->

    <div class="getAll">
      <van-submit-bar
        :price="getAllPrice"
        :button-text="'去结算' + getAllNum + '件'"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allchecked" @click="getAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>
<script>
// 导入
import {
  getchecktoken,
  getcartlist,
  getcartedit,
  getcartdelete,
} from "@/request/api.js";

import Vue from "vue";
import top0 from "./img/default.png";
import top1 from "./img/active.png";
export default {
  computed: {},
  data() {
    return {
      // 用户信息
      user: {},
      allchecked: "",
      navActive: 0,
      topActive: false,
      top0,
      top1,
      shop_data: [],
      cateDetail: {
        allNum: 0,
        allPrice: 3050,
      },
      tipActive: [],
    };
  },
  methods: {
    onSubmit() {
      // 跳转到结算页
      let obj = [];
      let num = 0;
      this.tipActive.forEach((v, i, self) => {
        if (v) {
          obj[num] = this.shop_data[i];
          num++;
        }
      });
      // 
      if (num > 0) {
        this.$router.push({ path: "/settlement", query: { obj } });
      }else{
        alert("请选择购买商品")
      }
    },
    // topAct 商品是否选中
    topAct(index) {
      this.tipActive[index] = !this.tipActive[index];

      let user = this.tipActive[index];
      this.$set(this.tipActive, index, user);
      // 判断是否全部选中
      this.allchecked = this.tipActive.every((v, i, s) => {
        return v;
      });
    },
    // 减少
    async del(index) {
      if (this.shop_data[index].num == 1) {
        let obj = { id: this.shop_data[index].id };
        let getcartdeleteRes = await getcartdelete(obj);
        if (getcartdeleteRes.data.code == 200) {
          location.reload(true);
        }
        console.log(getcartdeleteRes, "getcartdeleteRes");

        return;
      }
      let obj = {
        id: this.shop_data[index].id,
        type: 1,
      };
      let getcarteditRes = await getcartedit(obj);
      console.log(getcarteditRes);
      // 视图更新
      // ==========
      this.user = JSON.parse(localStorage.user);
      let obj2 = { uid: this.user.uid };
      let getcartlistRes = await getcartlist(obj2);
      console.log("shop", getcartlistRes);
      this.shop_data = getcartlistRes.data.list
        ? getcartlistRes.data.list
        : this.shop_data;
      // ==========
    },
    // 增加
    async add(index) {
      let obj = {
        id: this.shop_data[index].id,
        type: 2,
      };
      let getcarteditRes = await getcartedit(obj);

      // 视图更新
      // ==========
      this.user = JSON.parse(localStorage.user);
      let obj2 = { uid: this.user.uid };
      let getcartlistRes = await getcartlist(obj2);
      console.log("shop", getcartlistRes);
      this.shop_data = getcartlistRes.data.list
        ? getcartlistRes.data.list
        : this.shop_data;
      // ==========
    },
    // 全选按钮
    getAll() {
      this.tipActive.forEach((v, i, s) => {
        this.$set(this.tipActive, i, this.allchecked);
        return 1;
      });
    },
  },
  computed: {
    getAllPrice() {
      let allPrice = 0;
      this.tipActive.forEach((v, i, s) => {
        if (v) {
          allPrice += this.shop_data[i].price * this.shop_data[i].num;
        }
      });
      return allPrice * 100;
    },
    getAllNum() {
      let allNum = 0;
      this.tipActive.forEach((v, i, s) => {
        if (v) {
          allNum += this.shop_data[i].num;
        }
      });
      return allNum;
    },
  },
  async created() {
    // 判断token 是否有效
    let getchecktokenRes = await getchecktoken();
    if (getchecktokenRes.data.code !== 200) {
      this.$router.push("/login");
    } else {
      this.user = JSON.parse(localStorage.user);
      let obj = { uid: this.user.uid };
      let getcartlistRes = await getcartlist(obj);
      console.log("shop", getcartlistRes);
      this.shop_data = getcartlistRes.data.list
        ? getcartlistRes.data.list
        : this.shop_data;
      for (let i = 0; i < this.shop_data.length; i++) {
        this.tipActive[i] = false;
      }

      // console.log('this.shop_data',this.shop_data);
    }
  },
};
</script>


<style scoped lang="less">
// 结算
.getAll {
  .van-submit-bar {
    position: fixed;
    width: 100vw;
    height: 0.5rem;
    position: fixed;
    bottom: 0.5rem;
  }
}
// 导航
.nav {
  width: 100vw;
  height: 0.4rem;
  background-image: url("./img/bgi.jpg");
  .van-tabs {
    width: 100vw;
    height: 0.4rem;
    overflow: hidden;
    color: white;
  }
}
//
.shopMain {
  background-color: #ccc;
  // height: 100vw;
  padding-bottom: 150vw;
  .top {
    width: 100vw;
    height: 0.4rem;
    background-color: #fff;
    // margin-bottom: 0.1rem;

    span {
      display: inline-block;
      &:nth-child(1),
      img {
        width: 0.25rem;
        height: 0.25rem;
        vertical-align: middle;
        margin-left: 0.05rem;
      }
      &:nth-child(2) {
        width: 1rem;
        height: 0.4rem;
        outline: none;
        vertical-align: middle;
        margin-left: 0.2rem;
        line-height: 0.4rem;
        font-weight: 600;
      }
      &:nth-child(3),
      &:nth-child(4) {
        float: right;
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.14rem;
        font-weight: 600;
      }
      &:nth-child(3) {
        color: #fd6c54;
        margin-left: 0.05rem;
        margin-right: 0.2rem;
      }
    }
  }
  .card {
    width: 100vw;
    height: 1.4rem;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.3rem;
    .van-card {
      width: 100vw;
      height: 1.4rem;
      overflow: hidden;
      position: relative;
    }
    .thImg {
      margin-left: 0.2rem;
      margin-top: -0.08rem;
      width: 1rem;
      height: 1rem;
    }
    span,
    span > img {
      width: 0.25rem;
      height: 0.25rem;
      vertical-align: middle;
      margin-left: 0.05rem;
    }
    span > img {
      z-index: 2;
      position: absolute;
      top: 50%;
    }
    .van-card {
      .tags11 {
        width: 80vw;
        height: 0.4rem;
        margin-left: 0.1rem;
        color: black;
        .tag1,
        .tag2,
        .tag3,
        .tag4 {
          width: 47vw;
          background-color: transparent;
          color: black;
          font-weight: 600;
        }
        .tag2 {
          color: #ccc;
        }
        .tag3 {
          color: tomato;
        }
        .tag4 {
          margin-top: 0.03rem;
          span {
            margin-right: 0.05rem;
            &:nth-child(1) {
              margin-left: -0.05rem;
              color: tomato;
              font-size: 0.17rem;
            }
            del {
              margin-left: 0.25rem;
              color: #ccc;
              font-size: 0.12rem;
            }
          }
        }
      }
      .numBtn {
        width: 0.47rem;
        height: 0.5rem;

        .numBtn1,
        .numBtn2,
        .numBtn3 {
          width: 0.2rem;
          height: 0.2rem;
          color: black;
          text-align: center;
        }
        .numBtn1,
        .numBtn3 {
          text-align: center;
          font-weight: 600;
          font-size: 0.2rem;
        }
        .numBtn2 {
          font-size: 0.2rem;
          background-color: #ccc;
        }
      }
    }
  }
}
</style>